<template>
  <div class="h-panel">
    <PaasTitleBar></PaasTitleBar>
    <div class="h-panel-body bottom-line">
      <Form ref="form" :validOnChange="true" :showErrorTip="true" labelPosition="true" :labelWidth="110" :rules="vRules" :model="model" mode="twocolumn">
        <FormInput label="菜单名称" prop="title" v-model="model.title"></FormInput>
        <FormInput label="访问地址" prop="url" v-model="model.url"></FormInput>
        <FormInput label="菜单图标" prop="icon" v-model="model.icon"></FormInput>
        <FormPageSelect label="上级编号" prop="superId" v-model="model.superId" url="/sysmenus/select"></FormPageSelect>
        <FormPageSelect label="支持按钮" prop="btnId" v-model="model.btnId" url="/sysbuttons/select" :multiple="true"></FormPageSelect>
        <FormInput label="排序" prop="menuOrder" v-model="model.menuOrder"></FormInput>
      </Form>
    </div>
    <PaasButtonBar></PaasButtonBar>
  </div>
</template>
<script>
export default {
  async mounted() {
    let id = this.$route.query.id;
    if (!!id) {
      this.model = await this.$store.dispatch("getFormData", id);
      this.model.btnId = this.StaticFunc.split(this.model.btnId);
    }
  },
  data() {
    return {
      model: {
        title: "",
        url: "",
        icon: "",
        btnId: "",
        menuOrder: "",
      },
      vRules: {
        required: ["title"],
      },
    };
  },
  methods: {
    validate() {
      this.model.btnId = this.StaticFunc.join(this.model.btnId);
    },
  },
  deactivated() {
    this.$destroy(true);
  },
};
</script>